{% block sw_import_export_edit_profile_modal_mapping %}
<div class="sw-import-export-edit-profile-modal-mapping">

    {% block sw_import_export_edit_profile_modal_mapping_toolbar %}
    <div class="sw-import-export-edit-profile-modal-mapping__toolbar">
        {% block sw_import_export_edit_profile_modal_mapping_toolbar_search_field %}
        <sw-simple-search-field
            v-model:value="searchTerm"
            size="small"
            variant="form"
            :disabled="!mappingsExist"
            @search-term-change="onSearch"
        />
        {% endblock %}

        {% block sw_import_export_edit_profile_modal_mapping_toolbar_add_mapping %}
        <mt-button
            v-tooltip="{
                message: $tc('sw-import-export.profile.addMappingTooltipText'),
                disabled: addMappingEnabled,
                showOnDisabledElements: true
            }"
            class="sw-import-export-edit-profile-modal-mapping__add-action"
            ghost
            :disabled="profile.systemDefault || !addMappingEnabled"
            size="small"
            variant="secondary"
            @click="onAddMapping"
        >
            {{ $tc('sw-import-export.profile.addMappingLabel') }}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_import_export_edit_profile_modal_mapping_grid %}
    <sw-data-grid
        v-if="mappingsExist"
        :data-source="sortedMappings"
        :compact-mode="false"
        :show-selection="false"
        :show-actions="!profile.systemDefault"
        :columns="mappingColumns"
        plain-appearance
        class="sw-import-export-edit-profile-modal-mapping__grid"
    >

        {% block sw_import_export_edit_profile_modal_mapping_grid_csv_name_column %}
        <template #column-csvName="{ item, itemIndex }">

            <mt-text-field
                v-model="item.mappedKey"
                :name="`mappedKey-${itemIndex}`"
                :disabled="profile.systemDefault"
            />
        </template>
        {% endblock %}

        {% block sw_import_export_edit_profile_modal_mapping_grid_entry_column %}
        <template #column-entry="{ item }">
            <sw-import-export-entity-path-select
                v-model:value="item.key"
                :languages="languages"
                :currencies="currencies"
                :entity-type="profile.sourceEntity"
                :disabled="profile.systemDefault"
                :custom-field-sets="customFieldSets"
            />
        </template>
        {% endblock %}

        {% block sw_import_export_edit_profile_modal_mapping_grid_required_column %}
        <template #column-required="{ item }">

            <mt-switch
                v-show="isRequiredBySystem(item)"
                class="sw-import-export-edit-profile-modal-mapping__required-by-user-switch"
                :model-value="true"
                :disabled="true"
            />

            <mt-switch
                v-show="!isRequiredBySystem(item)"
                v-model="item.requiredByUser"
                class="sw-import-export-edit-profile-modal-mapping__required-by-user-switch"
                :disabled="profile.systemDefault"
            />
        </template>
        {% endblock %}

        {% block sw_import_export_edit_profile_modal_mapping_grid_default_value_column %}
        <template #column-defaultValue="{ item, itemIndex }">

            <mt-switch
                v-model="item.useDefaultValue"
                :name="`useDefaultValue-${itemIndex}`"
                :disabled="isDefaultValueCheckboxDisabled()"
                class="sw-import-export-edit-profile-modal-mapping__default-value-switch"
            />

            <mt-text-field
                v-model="item.defaultValue"
                :name="`defaultValue-${itemIndex}`"
                :disabled="isDefaultValueTextFieldDisabled(item)"
            />
        </template>
        {% endblock %}

        {% block sw_import_export_edit_profile_modal_mapping_grid_position_column %}
        <template #column-position="{ item, itemIndex }">

            {% block sw_import_export_edit_profile_modal_mapping_grid_position_column_button_group %}
            <sw-button-group class="sw-import-export-edit-profile-modal-mapping__position-buttons">
                {% block sw_import_export_edit_profile_modal_mapping_grid_position_column_button_group_up %}
                <mt-button
                    size="x-small"
                    square
                    :disabled="isFirstMapping(item) || !!searchTerm"
                    variant="secondary"
                    @click="updateSorting(itemIndex, 'up')"
                >
                    {% block sw_import_export_edit_profile_modal_mapping_grid_position_column_button_group_up_icon %}
                    <mt-icon
                        name="regular-chevron-up-xxs"
                        size="12px"
                    />
                    {% endblock %}
                </mt-button>
                {% endblock %}

                {% block sw_import_export_edit_profile_modal_mapping_grid_position_column_button_group_down %}
                <mt-button
                    size="x-small"
                    square
                    :disabled="isLastMapping(item) || !!searchTerm"
                    variant="secondary"
                    @click="updateSorting(itemIndex, 'down')"
                >
                    {% block sw_import_export_edit_profile_modal_mapping_grid_position_column_button_group_down_icon %}
                    <mt-icon
                        name="regular-chevron-down-xxs"
                        size="12px"
                    />
                    {% endblock %}
                </mt-button>
                {% endblock %}
            </sw-button-group>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_import_export_edit_profile_modal_mapping_grid_context_menu_delete %}
        <template #actions="{ item }">
            <sw-context-menu-item
                variant="danger"
                :disabled="profile.systemDefault"
                @click="onDeleteMapping(item.id)"
            >
                {{ $tc('sw-import-export.profile.deleteMappingLabel') }}
            </sw-context-menu-item>
        </template>
        {% endblock %}

    </sw-data-grid>
    {% endblock %}

    {% block sw_import_export_edit_profile_modal_mapping_empty_state %}
    <sw-empty-state
        v-else
        class="sw-import-export-edit-profile-modal-mapping__empty-state"
        :title="$tc('sw-import-export.profile.mappingEmptyState')"
        :absolute="false"
    />
    {% endblock %}
</div>
{% endblock %}
